<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>全屏查看图片</title>

    <link rel="stylesheet" href="../css/weui.css">
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        body{
            background-color: rgba(242, 242, 242, 1);
            padding:0 2%;
        }
    </style>
</head>
<body>
    <div id="browerPic" v-cloak>
        <ul class="comHeader weui-cells">
            <li>{{unit.utitle}}</li>
            <li>水位计：{{unit.uwarterL}}</li>
            <li>时间：{{unit.utime}}</li>
            <button class="weui-btn weui-btn_primary exportBtn">导出</button>
        </ul>

        <div class="list" v-for="(item,index) in imgList">
            <div class="weui-media-box weui-media-box_text comRadius8BgW">
                <h4 class="weui-media-box__title">{{item.name}}</h4>
                <div class="weui-form-preview__item textAlignR">
                  <label class="weui-form-preview__label">{{item.imgSize}}</label>
                  <span class="weui-form-preview__value">
                        <button class="weui-btn weui-btn_mini weui-btn_primary" v-on:click="showPic(item.url)">查看</button> &nbsp;&nbsp;
                        <button  class="weui-btn weui-btn_mini weui-btn_primary">下载</button>
                  </span>
                </div>
            </div>
        </div>
    </div>
    

    <script src="../js/jquery-2.1.4.js"></script>
    <script src="../js/jquery-weui.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/swiper.js"></script>

    <script>
        new Vue({
            el:'#browerPic',
            data:{
                unit:{
                    utitle:'厦门',
                    uwarterL:'坝上',
                    utime:"2018/08/24 10:00:00~2018/08/24 10:00:00"
                },
                imgList:[
                    {
                        url:'../images/img.jpg',
                        name:'img.jpg',
                        imgSize:'135KB'
                    },{
                        url:'../images/img1.jpg',
                        name:'img1.jpg',
                        imgSize:'136KB'
                    },{
                        url:'../images/img2.jpg',
                        name:'img2.jpg',
                        imgSize:'138KB'
                    }
                ],
                browserImg:''
            },
            methods:{
                showPic:function(imgUrl){
                    var that = this;
                    that.browserImg = imgUrl;
                    //Jquery Weui start
                    var pb1 = $.photoBrowser({
                        items:[that.browserImg]
                    });
                    pb1.open();
                    //Jquery Weui end
                }
            }
        });
    </script>

</body>
</html>